<template>
  <div class="main">
    <div class="attributes" style="height: 60px;width: 100%">
      <div class="query_condition">
        <div>
          <span>选择日期:</span>
          <el-date-picker
              type="daterange"
              range-separator="~"
              start-placeholder="Start date"
              end-placeholder="End date"
              size="small"
              style="width: 156px"
          />
        </div>

        <div>
          <span>类型:</span>
          <el-select
              v-model="genreData"
              multiple
              placeholder="请选择"
              size="small"
              style="width: 180px"
          >
            <el-option
                v-for="item in genreMsg"
                :key="item.value"
                :label="item.label"
                :value="item.value"

            />
          </el-select>
        </div>

        <div>
          <span>发送范围:</span>
          <el-cascader :options="beginMsg" size="small" clearable style="width: 82px" />
          <el-cascader :options="beginMsg" size="small" clearable style="width: 82px" />
        </div>

        <div>
          <span>快速搜索:</span>
          <el-input placeholder="请输入标题或发布者姓名" size="small" style="width: 150px; font-size: 8px"/>
        </div>

        <div>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </div>
      </div>
    </div>

    <div class="dataIn">
      <!--  表格  -->
      <leave-record-table />
    </div>
  </div>
</template>

<script lang="ts" setup>
import LeaveRecordTable from "@/views/index/jiaxiaohudong/StudentLeave_manage/tabularData/leaveReviewTable.vue";
</script>

<style scoped>
@import url('@/style/paging.css');
/* 查询列表 */
.attributes{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #d9d9d9;
}
.query_condition{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  justify-items: center;
  font-size: 14px;
}
.query_condition div{
  display: flex;
  align-items: center;
}
.query_condition button{
  height: 22px;
  width: 65px;
}
/* 查询列表 */
.tab_from :deep(.el-text--primary){
  margin: 0 6px;
}
.studentList__button{
  display: flex;
  justify-content: right;
  margin-bottom: 10px;
}
.dataIn{
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #d9d9d9;
}

</style>
